import React, {useState} from 'react'
import './style.less'
import defaultImg from '../../../../assets/images/default.png'
import { loadImageAsync } from '../../../../utils/loadImg'
import { Link } from 'react-router-dom'

const Item = (props) => {
  const [currentImg,setCurrentImg] = useState(defaultImg)
  const data = props.data
  loadImageAsync(data.img).then(res => {
    setCurrentImg(res)
  }).catch(err => {
    console.log(err)
  })
  return (
    <div className="list-item">
      <Link to={`/details/${data.id}`}>
        <img src={currentImg} alt="" />
        <div className="mask">
          <div className="left">
            <p>{data.title}</p>
            <p>{data.houseType}</p>
          </div>
          <div className="right">
            <div className="btn">{data.rentType}</div>
            {/* 解析数据中的html结构 */}
            <p dangerouslySetInnerHTML={{ __html: data.price + '元/月' }}></p>
          </div>
        </div>
      </Link>
    </div>
  )
}
export default Item
